<template>
	<view class="container" :style="{backgroundImage:'url(' + imageURL + ')', paddingTop: barHeight + 'px'}">
		<view class="title1">“我参与<text>·</text>齐创建<text>·</text>共文明”</view>
		<view class="title2">文明城市创建知识问答</view>
		<view class="form">
			<view class="form_title">基础信息</view>
			<view class="form_content">
				<view class="form_item">
					<view class="label"><text class="required">*</text>您的姓名</view>
					<input v-model="form.name" type="text" placeholder="请输入您的姓名" />
				</view>
				<view class="form_item">
					<view class="label"><text class="required">*</text>您的手机号码</view>
					<input v-model="form.phone" type="tel" maxlength="11" placeholder="请输入您的手机号码" />
				</view>
				<view class="form_item">
					<view class="label"><text class="required">*</text>所属乡镇（街道）</view>
					<picker mode="selector" :range="streetRange" range-key="name" @change="streetChange">
						<view class="picker">
							<text class="placeholder" v-if="!street">请选择您的乡镇（街道）</text>
							<text v-else>{{ street }}</text>
							<image src="/static/arrow-down-s-line.png" mode=""></image>
						</view>
					</picker>
				</view>
				<view class="form_item">
					<view class="label"><text class="required">*</text>所属村庄</view>
					<view class="picker" v-if="!villageRange.length" @click="onTips">
						<text class="placeholder">请选择您的村庄</text>
						<image src="/static/arrow-down-s-line.png" mode=""></image>
					</view>
					<picker mode="selector" :range="villageRange" range-key="name" @change="villageChange" v-else>
						<view class="picker">
							<text class="placeholder" v-if="!village">请选择您的村庄</text>
							<text>{{ village }}</text>
							<image src="/static/arrow-down-s-line.png" mode=""></image>
						</view>
					</picker>
				</view>
				<button class="submitBtn" @click="onSubmit">进入答题</button>
			</view>
		</view>
	</view>
</template>

<script>
	import bgBase64 from '@/common/bg.js'
	import { getAreaApi, authLoginApi, updateBasicInfoApi } from '@/api/api.js'
	export default {
		data() {
			return {
				imageURL: bgBase64,
				barHeight: 0,
				streetRange: [],
				street: '',
				villageRange: [],
				village: '',
				form: {
					name: '',
					phone: '',
					streetId: '',
					villageId: '',
				},
				loginCode: ''
			}
		},
		onLoad() {
			
			this.getSysInfo()
		},
		onShow() {
			this.getCode()
		},
		onShareAppMessage() {
			return {
				title: '文明城市创建知识问答'
			}
		},
		onShareTimeline() {
			return {
				title: '文明城市创建知识问答'
			}
		},
		methods: {
			// 预获取code
			getCode() {
				uni.login({
					success: (res) => {
						this.loginCode = res.code
						this.getUserInfo()
					}
				})
			},
			// 微信授权
			getUserInfo() {
				authLoginApi({code: this.loginCode}).then(res => {
					this.form.name = res.data.nickname
					this.form.phone = res.data.mobile
					this.form.streetId = res.data.xiangzhen_id
					this.street = res.data.xiangzhen
					this.form.villageId = res.data.cun_id
					this.village = res.data.cun
					this.getAreaInfo()
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('userInfo', res.data)
					if(!res.data.is_answer) {
						uni.navigateTo({
							url: '/pages/index/score'
						})
					}
				})
			},
			// 获取地区信息
			getAreaInfo() {
				getAreaApi().then(res => {
					this.streetRange = res.data
					let index = this.streetRange.findIndex(el => el.id == this.form.streetId)
					if(index != -1) this.villageRange = this.streetRange[index].childlist
				})
			},
			getSysInfo() {
				uni.getSystemInfo({
					success: (e) => {
						let custom = uni.getMenuButtonBoundingClientRect();
						this.barHeight = custom.bottom + custom.top - e.statusBarHeight;
					},
				})
			},
			streetChange(e) {
				const { value } = e.detail
				this.street = this.streetRange[value].name
				this.form.streetId = this.streetRange[value].id
				this.village = ''
				this.form.villageId = ''
				this.villageRange = this.streetRange[value].childlist
			},
			onTips() {
				uni.showToast({
					title: '请先选择您的乡镇',
					icon: 'none'
				})
			},
			villageChange(e) {
				const { value } = e.detail
				this.village = this.villageRange[value].name
				this.form.villageId = this.villageRange[value].id
			},
			onSubmit() {
				let reg = /^1[3456789]\d{9}$/
				if(!this.form.name) return uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				})
				if(!this.form.phone) return uni.showToast({
					title: '请输入您的手机号码',
					icon: 'none'
				})
				if(!reg.test(this.form.phone)) return uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				})
				if(!this.form.streetId) return uni.showToast({
					title: '请选择您的乡镇（街道）',
					icon: 'none'
				})
				if(!this.form.villageId) return uni.showToast({
					title: '请选择您的村庄',
					icon: 'none'
				})
				updateBasicInfoApi({
					mobile: this.form.phone,
					nickname: this.form.name,
					xiangzhen_id: this.form.streetId,
					cun_id: this.form.villageId
				}).then(res => {
					console.log(res)
					uni.navigateTo({
						url: '/pages/index/answer'
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.container {
	position: relative;
	width: 100%;
	height: 100vh;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-sizing: border-box;
	.title1, .title2 {
		font-size: 48rpx;
		color: #1f0b77;
		font-weight: 700;
	}
	.title1 {
		padding-top: 40rpx;
		padding-left: 20rpx;
		margin-bottom: 10rpx;
		text {
			margin: 0 5rpx;
		}
	}
	.title2 {
		padding-left: 1em;
	}
	.form {
		padding: 30rpx;
		margin-top: 115rpx;
		&_title {
			font-size: 36rpx;
			padding: 15rpx 0 20rpx 40rpx;
		}
		&_content {
			padding: 40rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.form_item {
				margin-bottom: 30rpx;
				.required {
					color: #f00;
					font-size: 40rpx;
				}
			}
			.label {
				margin-bottom: 30rpx;
			}
			input {
				height: 70rpx;
				border: 1px solid #8f8f8f;
				border-radius: 15rpx;
				padding: 0 30rpx;
				font-size: 30rpx;
			}
			.picker {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 70rpx;
				border: 1px solid #8f8f8f;
				border-radius: 15rpx;
				padding: 0 20rpx 0 30rpx;
				font-size: 30rpx;
				image {
					width: 50rpx;
					height: 50rpx;
				}
				.placeholder {
					color: #666;
				}
			}
		}
		.submitBtn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #447df3;
			color: #fff;
			font-weight: 700;
			font-size: 34rpx;
			margin-top: 120rpx;
		}
	}
}
</style>
